<template>
    <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="ProductDetails">
        <div class="ProductDetails_img"> <img :src="ProductModel.Picture" alt=""> </div>
        <div class="ProductDetails_form">
            <div class="nav_week">
                <div class="week_a">
                    <div class="name"> {{ ProductModel.Name }} </div>
                    <!-- <div class="chou"> 已购买 <span>{{ ProductModel.Raise }}</span> 元 </div> -->
                </div>
                <div class="week_b">
                    <!-- <div class="huibao"> 回报比例300% </div> -->
                    <div class="moert"> 售价：<span> {{ ProductModel.Price }}</span> </div>
                </div>
            </div>
            <div class="nav_more">
                <div class="int">
                    <div class="lf">
                        <p> 余额积分 </p>
                        <h5 style="color:#333333"> {{ token.Wallet3 }} </h5>
                    </div>
                </div>
                <div class="int">
                    <div class="lf">
                        <p> 项目详情 </p>
                        <div class="ShipToAddress">
                            {{ ProductModel.Contents }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ProductDetails_submit">
            <div class="cancel" @click="goCancel()"> 取消 </div>
            <div class="Alipay" @click="subumitCreate()"> 线下支付 </div>
        </div>
        <div class="form" v-html="content"></div>
    </div>
</template>

<script>
import { defineComponent, reactive, onMounted, onBeforeMount, onBeforeUnmount, ref, toRefs, watchEffect, watch } from "vue";
import { Toast, Notify } from 'vant';
import { Dialog } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import { useRoute, useRouter } from "vue-router";
import router from "@/router";
import { GetMemberExt } from "@/network/user";
import CryptoJS from 'crypto-js'
import { GetProductModel, GetOrderDetail, Create, paytoken } from "@/network/order";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const route = useRoute();
        const { id } = route.query;
        const state = reactive({
            token: store.state.user.token,
            id: id,
            ProductModel: '',
            PayMoney: 0,
            PayMoneyValue: 0,
            IsBalacneMoeny: false,
            content: '',
        })
        onMounted(() => {
            init();
        });
        onBeforeUnmount(() => {

            console.log("即将销毁");
        });
        onBeforeMount(() => {

            console.log("DOM即将挂载");
        })
        // 初始化信息
        const init = () => {
            getUser();
            // 获取商品详情
            GetProductModel({
                ProductId: state.id
            }).then((res) => {
                var data = res.Data;
                state.ProductModel = data
            });
        };
        // 1.2、普通监听
        watch(() => state.PayMoney, (value) => {
            if (state.PayMoney > state.token.Wallet3) {
                state.PayMoneyValue = (state.PayMoney - state.token.Wallet3).toFixed(2)
            } else {
                state.PayMoneyValue = 0
            }
        });
        //是否抵扣余额
        const Deductionbalance = () => {
            state.IsBalacneMoeny = !state.IsBalacneMoeny
        };
        // 创建订单
        const subumitCreate = () => {
            if (state.token.RecipientPhone1) {
                var RecipientArea1 = state.token.RecipientArea1;
                var oit = (JSON.parse(RecipientArea1)).toString();
                Dialog.confirm({
                    title: '确认收货信息',
                    message: '姓名：' + state.token.RecipientName1 + '\n联系方式：' + state.token.RecipientPhone1 + '\n省市区：' + oit + '\n地址详情：' + state.token.RecipientAddress1,
                }).then(() => {
                    subumitCreateConfim();
                }).catch(() => { });
            } else {
                Dialog.confirm({
                    title: '提示',
                    message: '收货地址未填写，现在去完善？',
                }).then(() => {
                    router.push({
                        path: "/address",
                    });
                }).catch(() => { });
            }
        };
        // 提交订单
        const subumitCreateConfim = () => {
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '订单提交中...',
            });
            var params = {
                MemberId: state.token.ID,
                ProductId: state.id,
                PayMoney: state.ProductModel.Price,
                IsBalacneMoeny: state.IsBalacneMoeny
            }
            Create(params).then((res) => {
                var data = res.Data;
                if (res.Code == 0) {
                    state.content = '';
                    toast.clear()
                    Dialog.alert({
                        title: '提示',
                        message: '购买成功！',
                        confirmButtonColor: '#73D56C',
                        theme: 'round-button',
                    }).then(() => {
                        router.push({
                            path: "/myorder",
                            query: {
                                type: 1
                            }
                        });
                    });

                } else {
                    toast.clear()
                    Notify({ type: 'danger', message: res.Message });
                }
            });
        };
        const decryption = (str) => {
            return CryptoJS.enc.Base64.parse(str).toString(CryptoJS.enc.Utf8);
        }
        //获取用户信息 更新余额
        const getUser = () => {
            store.dispatch("GetMemberInfo", { Id: store.state.user.token.ID }).then((res) => {
                state.token = res.Data
            }).catch(() => { });
        }
        const goCancel = () => {
            router.push({ path: "/Commodity" });
        };
        const onClickLeft = () => {
            router.push({ path: "/Commodity" });
        };

        return {
            ...toRefs(state),
            onClickLeft,
            goCancel,
            Deductionbalance,
            subumitCreate,
            subumitCreateConfim,
            getUser,
            decryption
        };
    },
};
</script>

<style scoped></style>